<template>
    <scroll-view @scrolltolower="handleToLower" class="recommend_view" scroll-y v-if="recommends.length > 0">
        <!-- 推荐 开始 -->
        <view class="recommend_warp">
            <navigator
                    class="recommend_item"
                    v-for="item in recommends"
                    :key="item.id"
                    :url="`/pages/album/index?id=${item.target}`"
            >
                <!-- mode="widthFix" ===> 自适应-->
                <img mode="widthFix" :src="item.thumb" alt="">
            </navigator>
        </view>
        <!-- 推荐 结束 -->

        <!-- 月份 开始 -->
        <view class="monthes_wrap">
            <view class="monthes_title">
                <view class="monthes_title_info">
                    <view class="monthes_info">
                        <text> {{monthes.DD}}</text>
                        / {{monthes.MM}}月
                    </view>
                    <view class="monthes_text">{{monthes.title}}</view>
                </view>
                <view class="monthes_title_more"> 更多 > </view>
            </view>
            <view class="monthes_content">
                <view
                    class="monthes_item"
                    v-for="(item, index) in monthes.items"
                    :key="item.id">
                    <go-detail :list="monthes.items" :index="index">
                        <img mode="widthFix" :src="item.thumb + item.rule.replace('$<Height>',360)" alt="">
                    </go-detail>
                </view>
            </view>
        </view>
        <!-- 月份 结束 -->

        <!-- 热门 开始 -->
        <view class="hots_wrap">
            <view class="hots_title">
                <text> 热门 </text>
            </view>
            <view class="hots_content">
                <view class="hot_item"
                      v-for="(item,i) in hots"
                      :key="i"
                >
                    <go-detail :list="hots" :index="i">
                        <img mode="widthFix" :src="item.thumb" alt="">
                    </go-detail>

                </view>
            </view>
        </view>
        <!-- 热门 结束 -->
    </scroll-view>
</template>

<script>
    import moment from 'moment'
    import goDetail from '@/components/goDetail'

    export default {
        components: {
            goDetail
        },
        name: "home-recommend",
        data() {
            return {
                // 推荐列表
                recommends: [],
                // 月份列表
                monthes: [],
                // // format 时间过滤成dd号/mm月
                // dd: '',
                // mm: ''

                // 热门列表
                hots: [],
                // 请求的参数
                params: {
                    // 要获取几条数据
                    limit: 30,
                    // 关键字
                    order: "hot",
                    // 要跳过几条
                    skip: 0
                },
                // 是否还有下一页
                hasMore: true
            }
        },
        mounted() {
            this.getList(this.params);
            // 修改页面的标题
            uni.setNavigationBarTitle({
                title: "懂你找图"
            })
        },
        methods: {
            // 获取接口的数据
            getList(params) {
                this.request({
                    url: "http://157.122.54.189:9088/image/v3/homepage/vertical",
                    data: params
                }).then(result => {
                    console.log(result);

                    // 将时间错 改成 dd号/mm月
                    // 手动实现
                    // const dt = new Date(result.res.homepage[2].stime);
                    // this.mm = (dt.getMonth() + 1 + '').padStart(2, '0');
                    // this.dd = (dt.getDate() + '').padStart(2, '0');

                    // 判断还有没有下一页数据
                    if (result.res.vertical.length === 0) {
                        this.hasMore = false;
                        return;
                    }
                    // 别人写好的模块实现
                    if (this.recommends.length === 0) {
                        this.recommends = result.res.homepage[1].items;
                        this.monthes = result.res.homepage[2];
                        this.monthes.MM = moment(this.monthes.stime).format("MM");
                        this.monthes.DD = moment(this.monthes.stime).format("DD");
                    }


                    // 获取 热门 数据列表
                    // 数组拼接的方式 ES6

                    this.hots = [...this.hots, ...result.res.vertical];
                    console.log(this.monthes)

                })
            },
            // 滚动条触底事件
            handleToLower() {
                /*
                1、修改参数 skip += limit;
                2、重新发送请求 getList()
                3、请求回来成功，hots 数据叠加
                * */
                if (this.hasMore) {
                    // 1、
                    this.params.skip += this.params.limit;
                    // 2、
                    this.getList(this.params);

                } else {
                    uni.showToast({
                        title: "没有数据了！",
                        icon: "none"
                    })
                }

                // console.log('狗丢了怎么办')
            }
        }

    }
</script>

<style scoped lang="scss">
    .recommend_view{
        // height：屏幕的高低 - 头部标题的高度
        height: calc( 100vh - 36px );
    }

    .recommend_warp{
        // flex 布局
        display: flex; // 设置为弹性布局
        flex-wrap: wrap; // 设置为可以换行
        .recommend_item{
            width: 50%;
            border: 6rpx solid #fff;
        }
    }

    .monthes_wrap{
        .monthes_title{
            display: flex;
            justify-content: space-between;
            padding: 20rpx;
            .monthes_title_info{
                color: $color;
                font-size: 30rpx;
                font-weight: 600;
                display: flex;
                .monthes_info{
                    text{
                        font-size: 36rpx;
                    }
                }
                .monthes_text{
                    font-size: 34rpx;
                    color: #666;
                    margin-left: 30rpx;
                }
            }
            .monthes_title_more{
                font-size: 24rpx;
                color: #666;
                margin-left: 30rpx;

            }
        }
        .monthes_content{
            display: flex;
            flex-wrap: wrap;
            .monthes_item{
                width: 33.33%;
                border: 5rpx solid #fff;
            }
        }
    }

    .hots_wrap{
        .hots_title{
            padding: 20rpx;
            text{
                border-left: 20rpx solid $color;
                padding-left: 20rpx;
                font-size: 34rpx;
                font-weight: 600;
            }
        }
        .hots_content{
            display: flex;
            flex-wrap: wrap;
            .hot_item{
                width: 33.33%;
                border-left: 5rpx solid #fff;
            }
        }
    }

</style>
